<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>注册</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="./stylesheets/register.css">
</head>
<body>
      <!-- logo -->
            <nav class="navbar navbar-default">
                  <div class="container-fluid">
                        <div class="navbar-header">
                              <a class="navbar-brand" href="#">
                                          GP10
                              </a>
                        </div>
                  </div>
            </nav>
      <!-- logo end-->

      <!-- 内容表单  -->
            <div class="container">
                       

                  <div class="row">
                        <div class="alert tip" role="alert" >
                              <a href="#" class="alert-link">...</a>
                        </div>
                        <div class="col-md-6 col-md-offset-3">
                              <h3>用户注册</h3>
                              <form class="register-form" id="register_form"> 
                                    <div class="form-group">
                                          <div class="input-group">
                                          <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                                          <input type="text" class="form-control" id="username" placeholder="请输入用户名" value="yanghuaizhi">
                                          </div>
                                    </div>
                                    <div class="form-group">
                                          <div class="input-group">
                                          <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                                          <input type="password" class="form-control" id="password" placeholder="请输入密码" value="123456">
                                          </div>
                                    </div>
                                    <div class="form-group">
                                          <div class="input-group">
                                          <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                                          <input type="text" class="form-control" id="mail" placeholder="请输入邮箱" value="123456qq">
                                          </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary" id="register" >注册</button>
                              </form>
                        </div>
                  </div>

            </div>
      <!-- 内容表单  end-->
      <script src="./common.js"></script>
      <script>
            var register = document.getElementById("register");
            var form = document.getElementById("register_form");
            var userIpt = document.getElementById("username");
            var pwdIpt = document.getElementById("password");
            var alert = document.querySelector(".alert");
            var mailIpt = document.getElementById("mail");

            // console.log(alert);
            // 该变量表示是否已经发送了请求;
            var loading = false;
            // 阻止表单默认事件;
            form.onsubmit = function(evt){
                  var e = evt || window.event;
                  e.preventDefault();
            }
            // 获取数据发送请求;
            register.onclick = function(evt){
                  if(loading) return false;
                  var username = userIpt.value;
                  var password = pwdIpt.value;
                  var email    = mailIpt.value;

                  loading = true;
                  register.disabled = "disabled";
                  register.innerHTML = "loading...";
                  xhrPost("http://10.9.65.244/group-server/login-server/server/interface/register.php",{
                        username ,
                        password,
                        email,
                        author: "ty"
                  })
                  .then((res)=>{
                        console.log(res);
              
                        loading = false;
                        register.removeAttribute("disabled");
                        register.innerHTML = "注册";

                        // 注册信息处理;
                        res = JSON.parse(res);
                        if(res.status === "success"){
                              showInfo("success","恭喜!注册成功，我们三秒钟之后会为您跳转到登陆界面!");
                              setTimeout( a => {
                                    // 存cookie;
                                    // http://localhost/group-server/views/06login.html
                                    cookie("tocken",res.password,{
                                          expires : 20,
                                          path: "/"
                                    });
                                    cookie("username",username,{
                                          expires : 20,
                                          path: "/"
                                    });

                                    location.href = "./06login.html";
                              },3000)
                        }else if(res.status === "error"){
                              showInfo("error" , res.errorType)
                        }
                        
                  })
            }

            function showInfo(type,text){
                  var children = alert.children[0];
                  // 1. 改变元素的 className ;
                  if(type === "success"){
                        alert.className = "alert alert-success"
                  }else if(type === "error"){
                        alert.className = "alert alert-danger"
                  }
                  // 2. 显示内容;
                  children.innerHTML = text;
                  alert.style.display = "block";

                  setTimeout(()=>{
                        alert.style.display = "none";
                  },3000)
            }
            
            
      </script>
</body>
</html>